<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<base target="_self">
	<title>CSS3_selector</title>
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
		}
	</style>
	<style class='classroom'>
		.example header{
			padding: 30px 0;
			background-color: #abcedf;
		}
		.example #box{

		}
		.example * {
           
        }
        .example #box{


        }
        .example #box>p{

        }
        .example .box{

        }
        .example div{

        }
        .example p + div{}
        .example [id]{

        }
        .example [class]{

        }
        .example [xyz]{
            background: red;
        }
		.example [xyz]::before{
            content: '1';
            width:12px;
            height: 12px;
            background: purple;
            display: inline-block;
        }
        .example [xyz]::after{
            content: '2';
            width:12px;
            height: 12px;
            background: blue;
            display: inline-block;
        }
        .example [xyz]::after:hover{
        	font-size: 50px;
        }
        .example .hz{
            width: 350px;
            border: 1px solid;
            text-indent: 2em;
        }
        .example .hz:first-line{
            background: greenyellow;
        }
        .example .hz:first-letter{
            background: purple;
            font-size: 20px;
        }
		.exa01 p + ul{
            height: 30px;
            background: greenyellow;
        }
        .exa01 p ~ ul{
            height: 30px;
            background: greenyellow;
        }
        .exa01 img{
            height: 300px;
            border: 1px solid red;
        }
        .exa01 img[src='1.jpg']{
            height: 350px;
        }
        .exa01 img[src ^='img']{
            height: 400px;
        }
        .exa01 img[src $='3.jpg']{
            height: 200px;
        }
        .exa01 img[src *='jpg']{
            height: 200px;
        }

		.exa02 #box{
            height: auto;
        }
        .exa02 div p:first-of-type{
            background: greenyellow;
        }
        .exa02 div p:first-child{
            background: purple;
        }
        .exa02 div p:last-of-type{
            background: red;
        }
        .exa02 div p:last-child{
            background: green;
        }
        .exa02 div p:only-of-type{
            background: pink;
        }
        .exa02 div p:only-child{
            background: yellow;
        }

        .exa02 div p:nth-child(1){  /*有要求*/
            background: gray;
        }
        .exa02 div p:nth-of-type(2){   /*随意*/
            background: blue;
        }

        .exa02 div p:nth-last-child(2){
            background: gold;
        }
        .exa02 div p:nth-last-of-type(1){
            background: silver;
        }
        .exa02 div p:last-child{
            background: red;
        }
        .exa02 div p:last-of-type{
            background: green;
        }
		.exa02 ul{
            width: 300px;

            margin: 50px auto;

        }
        .exa02 li{
            list-style: none;
            height: 35px;
            border: 1px dashed;
        }
        /*.exa02 ul li:nth-child(odd){  !*奇数行*!
            background: gray;
        }
        .exa02 ul li:nth-child(even){  !*偶数行*!
            background: blue;
        }*/
        .exa02 ul li:nth-child(2n){  /*偶数*/
            background: greenyellow;
        }
        .exa02 ul li:nth-child(2n+1){  /*奇数*/
            background: #ccc;
        }
        .exa02 ul li:nth-child(3n+3){
            background: #111;
        }
		.exa03 div p:empty{
            height: 30px;
            background: #ccc;
        }
        .exa03 section{
            width: 300px;
            border: 1px dotted;
            margin: 50px auto;
            overflow: hidden;
            text-align: center;
        }
        .exa03 section a{
            width: 33.33%;
            height: 35px;
            float: left;

            line-height: 35px;
            color: #000;
        }
        .exa03 section div{
            height: 400px;
            background: greenyellow;
            display: none;
            line-height: 400px;
        }
        .exa03 div:target{  /*div被激活的时候，要做什么操作*/
            display: block;
        }
        .exa03 input{
            width: 300px;
            height: 40px;
        }
        .exa03 input:enabled{
            border-color: red;
            outline: none;
        }
        .exa03 input:disabled{
            background: red;
        }

        .exa03 input[type='radio']:checked + label{  /*当input被点击时 找label 操作什么*/
            color: purple;
            background: greenyellow;
        }

        .exa03 p i:not(.on){
            background: #ddd;
        }
        .exa03 p i::selection{
            background: mediumpurple;

        }
        .exa03 a::selection{
            background: red;
        }
	</style>
</head>
<body>
	<header class="true">
		<h1>CSS3选择器</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、CSS选择器回顾</h4>
			<p>
				ID选择器，类名选择器， 
				标签选择器，组合选择器， 
				通配选择器， 
				子代选择器， > 选择到元素的直接后代 
				相邻兄弟选择器， + 选择到紧随目标元素后的第一个元素 
				属性选择器，[id] 
				伪类选择器 
				:before,:after在元素内容前面、后面添加内容(相当于行内元素) 
				::first-line 匹配文本块的首行 
				::first-letter 选择文本块的第一个字符 
			</p>
			<h4>二、CSS3新增选择器</h4>
			<p>
				1.关联选择器 
				例： p ~ ul  选择p后面的ul 
				2.属性选择器新增 
				例：img[src^='image']  选择src属性以'image'开头的img标签 
				例：img[src$='png']  选择src属性以'png'结尾的img标签 
				例：img[src*='bg']  选择src属性包含'bg'的img标签 
				3. 伪类新增  
				例：p:first-of-type  选择p，这些p必须为它们各自父级的所有p子元素的第1个 
				例：p:last-of-type  选择p，这些p必须为它们各自父级的所有p子元素的最后1个 
				例：p:only-of-type  选择p，这些p必须为它们各自父级的唯一的p 
				例：p:only-child  选择p，这些p必须为它们各自父级的唯一子元素 
				例：p:nth-child(2)  选择p，这些p必须为它们各自父级的第2个[子元素] 
				例：p:nth-last-child(2)  选择p，这些p必须为它们各自父级的倒数第2个子元素 
				例：p:nth-of-type(2)  选择p，这些p必须为它们各自父级的所有p子元素的第2个 
				例：p:nth-last-of-type(2)  选择p，这些p必须为它们各自父级的所有p子元素的倒数第2个 
				例：p:first-child  选择p，这些p必须为它们各自父级的第一个子元素 
				例：p:last-child  选择p，这些p必须为它们各自父级的最后一个子元素 
				例：p:empty  选择没有内容的p 
				例：p:target  选择当前被锚点激活的p 
				例：input:enabled  选择能被操作的input 开启 
				例：input:disabled  选择不能被操作的input 关闭 
				例：input:checked  选择被选中的input 点击事件 对单选按钮和复选框 
				例：p:not(.on)  选择除了.on的p 

				4.伪元素新增 
				例：input::selection 选择被用户选中的input 
			</p>
			<h4>Css3 选择器 –属性选择器</h4>
			<p>
				[att]		匹配所有具有att属性的	
				[att=val]		匹配所有att属性等于“val”的
				[att~=val]	匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)
				[att|=val]		匹配所有att属性以val-' 开头的或等于“val”（比如说zh-cn）

				[att*=val]		匹配所有att属性 包含'val'的	(val可以是字母)
				[att^=val]	匹配所有att属性 'val'开头的 
				[att$=val]	匹配所有att属性 'val'结束的	
			</p>
			<h4>Css3 选择器 --结构性伪类</h4>
			<p>
				E:nth-child(n)  	              	表示E父级的第n个子节点 
				E:nth-last-child(n) 	表示E父级中的第n个字节点，从后向前计算 

							------>（需E选择器能选中此元素）		
								
				E:nth-of-type(n)  		表示E父级中的第n个字节点，
				E:nth-last-of-type(n)	表示E父级中的第n个字节点，从后向前计算

							------->（需E选择器能选中此元素,且区分标签类型）				

				E:nth-child(odd)		匹配奇数行 同p:nth-child(2n-1)
				E:nth-child(even)		匹配偶数行 同p:nth-child(2n)
				             

				E:empty 	表示E元素中没有子节点（不能有空格,回车）。注意：子节点包含文本节点
			</p>
			<h4>Css3 选择器 --伪类</h4>
			<p>
				E:target 	当a标签获取焦点href=''所对应的 E元素锚点
				E:disabled 	表示不可点击的表单控件
				E:enabled 	表示可点击的表单控件
				E:checked 	表示已选中的checkbox或radio
				E:first-line 	表示E元素中的第一行
				E:first-letter 	表示E元素中的第一个字符
				E::selection	表示E元素在用户选中文字时

				E:not(selector) 	选择非 selector 选择器的每个元素。

				E~F		表示E元素后的所有兄弟F元素
			</p>
		</article>
	</section>
	<section class='example'>
		<header><h2>CSS3选择器example</h2></header>
		<div id="box" class="box" xyz="a">
		        自定义属性
		        <p></p>
		        <div>
		            <p></p>
		        </div>
		    </div>
		    <p class="hz">
		        面对大河我无限惭愧
		        我年华虚度 空有一身疲倦
		        和所有以梦为马的诗人一样
		        岁月易逝 一滴不剩
		        从明天起，做一个幸福的人
		        喂马、劈柴，周游世界
		        从明天起，关心粮食和蔬菜
		        我有一所房子，面朝大海，春暖花开
		        从明天起，和每一个亲人通信
		        告诉他们我的幸福
		        那幸福的闪电告诉我的
		        我将告诉每一个人
		        给每一条河每一座山取一个温暖的名字
		        陌生人，我也为你祝福
		        愿你有一个灿烂的前程
		        愿你有情人终成眷属
		        愿你在尘世获得幸福
		        我只愿面朝大海，春暖花开
		    </p>
		    <a href="https://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/">CSS伪类与CSS伪元素的区别及由来</a>
		    <a href="https://segmentfault.com/a/1190000000484493">详解 CSS 属性 - 伪类和伪元素的区别</a>
		    <a href="http://blog.csdn.net/sadfishsc/article/details/7047595">CSS 伪类与伪元素</a>
	</section>
	<section class='exa01'>
	   <p></p>
	   <div></div>
	   <ul></ul>
	   <img src="img/1.jpg" alt="" title="">
	   <img src="img/2.jpg" alt="">
	   <img src="img/3.jpg" alt="">
	   <img src="1.jpg" alt="">
	</section>
	<section class="exa02">
		 <div id="box">
		        <p>p0</p>
		        <div>div1</div>
		        <span></span>
		        <p>p1</p>
		        <h2>h2</h2>
		        <p>p2</p>
		        <em>em</em>
		    </div>
		    <div>
		        <p>p3</p>
		    </div>
		    <div>
		        <span></span>
		        <p>p4</p>
		    </div>
			<!--
			    什么情况下用 -child
			    <section>
			        <div></div>
			        <div></div>
			        <div></div>
			    </section>
			    什么情况下用 -of-type
			    <section>
			        <span></span>
			        <div></div>
			        <p></p>
			        <div></div>
			        <h2></h2>
			        <em></em>
			        <div></div>
			    </section>
			-->
			 <ul>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		    </ul>
	</section>
	<section class="exa03">
		<div>
	        <p></p>
	    </div>
	    <section>
	        <a href="#box1">选项卡一</a>
	        <a href="#box2">选项卡二</a>
	        <a href="#box3">选项卡三</a>
	        <div id="box1">box1</div>
	        <div id="box2" class="on">box2</div>
	        <div id="box3">box3</div>
	    </section>

	    <input type="text" placeholder="文本输入框">
	    <input type="text" placeholder="disabled" disabled>
	    <hr>
	    <br>
	    <input type="radio" id="sex"> <label for="sex">男</label>
	    <p>
	        <i>i1</i>
	        <i class="on">i2</i>
	        <i>i3</i>
	    </p>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		
	</script>
</body>
</html>